<template>
    <div v-if="Object.keys(goodsInfo).length!==0"
         class="goods-info">
        <div class="goods-info-desc">
            <span class="goods-info-desc-deco-front"></span>
            <div class="goods-info-desc-content">{{goodsInfo.desc}}</div>
            <span class="goods-info-desc-deco-after"></span>
        </div>
        <div class="goods-info-pic"
             v-for="(detailItem,index) in goodsInfo.detailImage"
             :keys="index">
            <div>{{detailItem.key}}</div>

            <img v-for="(picItem,index) in detailItem.list"
                 :keys="index"
                 :src="picItem" />

        </div>
    </div>
</template>
<script>
export default {
    name: 'DetailGoodsInfo',
    props: {
        goodsInfo: {
            type: Object,
            default: function () {
                return {};
            }
        }
    }
}
</script>
<style  scoped>
.goods-info {
    background-color: #fff;
    margin: 10px 0;
}
.goods-info-desc {
    padding: 15px;
    font-size: 14px;
    overflow: hidden;
}
.goods-info-desc-deco-front {
    width: 0;
    height: 0;
    display: inline-block;
    border: 4px solid black;
    border-radius: 2px;
    margin: 10px 0;
    position: relative;
}
.goods-info-desc-deco-front::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 100px;
    height: 0px;
    top: 0px;
    left: 4px;
    border-top: 0.5px solid #a3a3a5;
}
.goods-info-desc-deco-after {
    width: 0;
    height: 0;
    display: inline-block;
    border: 4px solid black;
    border-radius: 2px;
    margin: 10px 0;
    position: relative;
    float: right;
}
.goods-info-desc-deco-after::before {
    content: "";
    position: absolute;
    display: inline-block;
    width: 100px;
    height: 0px;
    top: 0px;
    right: 4px;
    border-top: 0.5px solid #a3a3a5;
}
.goods-info-pic > div {
    padding: 15px;
}
.goods-info-pic > img {
    width: 100%;
}
</style>